<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <title>哔哩哔哩</title>
</head>
<body>
  <div class="container">
      <!-- 头部logo -->
      <header>
        <img src="./assets/logo.png" alt="">
        <div class="right">
          <span class="iconfont icon-sousuo"></span>
          <a href="#">登录</a>
          <p>下载 APP</p>
        </div>
      </header>

      <!-- 导航栏 -->
      <div class="nav-box">
        <a href="#"><span class="first">首页</span></a>
        <a href="#"><span>动画</span></a>
        <a href="#"><span>番剧</span></a>
        <a href="#"><span>国创</span></a>
        <a href="#"><span>音乐</span></a>
        <a href="#"><span>舞蹈</span></a>
        <a href="#"><span class="iconfont icon-xiajiantou"></span></a>
        <p></p>
      </div>
  </div>


  <!-- 瀑布流 -->
    <div class="list">
      <div class="item">
          <img src="./assets/item1.jpg" alt="">
          <div class="txt">
            <a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
            <a href="#"><span class="iconfont icon-danmu"></span>2796</a>
          </div>
          <p>怎样的成就才能配得上这一路的颠沛流离</p>
      </div>

      <div class="item">
        <img src="./assets/item2.jpg" alt="">
        <div class="txt">
          <a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
          <a href="#"><span class="iconfont icon-danmu"></span>2796</a>
        </div>
        <p>三权合一！特朗普成为美国40年以来权力最大的总统！将势不可挡</p>
    </div>

    <div class="item">
      <img src="./assets/item3.jpg" alt="">
      <div class="txt">
        <a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
        <a href="#"><span class="iconfont icon-danmu"></span>2796</a>
      </div>
      <p>《原神》剧情PV-「花与美梦」</p>
  </div>

  <div class="item">
    <img src="./assets/item4.jpg" alt="">
    <div class="txt">
      <a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
      <a href="#"><span class="iconfont icon-danmu"></span>2796</a>
    </div>
    <p>姿势越怪 出片越帅</p>
</div>

<div class="item">
  <img src="./assets/item5.jpg" alt="">
  <div class="txt">
    <a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
    <a href="#"><span class="iconfont icon-danmu"></span>2796</a>
  </div>
  <p>官 方 恶 搞</p>
</div>

<div class="item">
  <img src="./assets/item6.jpg" alt="">
  <div class="txt">
    <a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
    <a href="#"><span class="iconfont icon-danmu"></span>2796</a>
  </div>
  <p>给大家表演一个腰上滚伞</p>
</div>

<div class="item">
  <img src="./assets/item7.jpg" alt="">
  <div class="txt">
    <a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
    <a href="#"><span class="iconfont icon-danmu"></span>2796</a>
  </div>
  <p>林黛玉七进七出救阿斗</p>
</div>

<div class="item">
  <img src="./assets/item8.jpg" alt="">
  <div class="txt">
    <a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
    <a href="#"><span class="iconfont icon-danmu"></span>2796</a>
  </div>
  <p>为了维护黑心食堂，嘴硬校长竟当众吞下蟑螂…？！</p>
</div>

<div class="item">
  <img src="./assets/item1.jpg" alt="">
  <div class="txt">
    <a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
    <a href="#"><span class="iconfont icon-danmu"></span>2796</a>
  </div>
  <p>怎样的成就才能配得上这一路的颠沛流离</p>
</div>

<div class="item">
<img src="./assets/item2.jpg" alt="">
<div class="txt">
  <a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
  <a href="#"><span class="iconfont icon-danmu"></span>2796</a>
</div>
<p>三权合一！特朗普成为美国40年以来权力最大的总统！将势不可挡</p>
</div>

<div class="item">
<img src="./assets/item3.jpg" alt="">
<div class="txt">
<a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
<a href="#"><span class="iconfont icon-danmu"></span>2796</a>
</div>
<p>《原神》剧情PV-「花与美梦」</p>
</div>

<div class="item">
<img src="./assets/item4.jpg" alt="">
<div class="txt">
<a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
<a href="#"><span class="iconfont icon-danmu"></span>2796</a>
</div>
<p>姿势越怪 出片越帅</p>
</div>

<div class="item">
<img src="./assets/item5.jpg" alt="">
<div class="txt">
<a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
<a href="#"><span class="iconfont icon-danmu"></span>2796</a>
</div>
<p>官 方 恶 搞</p>
</div>

<div class="item">
<img src="./assets/item6.jpg" alt="">
<div class="txt">
<a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
<a href="#"><span class="iconfont icon-danmu"></span>2796</a>
</div>
<p>给大家表演一个腰上滚伞</p>
</div>

<div class="item">
<img src="./assets/item7.jpg" alt="">
<div class="txt">
<a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
<a href="#"><span class="iconfont icon-danmu"></span>2796</a>
</div>
<p>林黛玉七进七出救阿斗</p>
</div>

<div class="item">
<img src="./assets/item8.jpg" alt="">
<div class="txt">
<a href="#"><span class="iconfont icon-24gl-playSquare"></span>103.8万</a>  
<a href="#"><span class="iconfont icon-danmu"></span>2796</a>
</div>
<p>为了维护黑心食堂，嘴硬校长竟当众吞下蟑螂…？！</p>
</div>
    </div>

  <!-- 底部 -->
    <footer>
      <span class="iconfont icon-bilibili"></span>
      <p>打开APP,看你感兴趣的视频</p>
    </footer>
  
</body>
</html>